<!--
 * @Descripttion: 详情弹框(查看、编辑、删除)
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-19 15:47:59
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-05-07 11:55:32
-->
<template>
  <KiFormDialog
    :show.sync="row__.show"
    :loading="row__.loading"
    :title="row__.status | dialogTitle__"
    v-model="row__.data"
    :readonly="row__.status === 'r'"
    :submit="submitForm"
    ref="formRef"
  >
    <template #el-form>
      <!-- <div>row__.status={{ row__.status }}</div>
      <div>row__.data={{ row__.data }}</div>  -->

      <h2><strong>基本信息</strong></h2>

      <el-form-item label="所属酒店" prop="hotelId" verify>
        <el-select
          v-model="row__.data.hotelId"
          placeholder="请选择"
          style="width: 100%"
          clearable
          filterable
        >
          <el-option
            v-for="item in options.hotelList"
            :key="item.hotelId"
            :label="item.hotelName"
            :value="item.hotelId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属房型" prop="roomTypeId" verify>
        <el-select
          v-model="row__.data.roomTypeId"
          :placeholder="
            row__.data.hotelId ? '请选择所属房型' : '请先选择所属酒店'
          "
          style="width: 100%"
          :disabled="row__.status === 'r' || !row__.data.hotelId"
          filterable
          clearable
        >
          <el-option
            v-for="item in options.roomType"
            :key="item.dataValue"
            :label="item.dataName"
            :value="item.dataValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="产品名称"
        prop="roomName"
        :verify="{ minLength: 2 , maxLength: 20 }"
      >
        <el-input
          v-model="row__.data.roomName"
          maxlength="20"
          show-word-limit
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="早餐份数" prop="breakfast" verify>
        <el-select
          v-model="row__.data.breakfast"
          placeholder="请选择"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="item in dict.zy_hotel_breakfast"
            :key="item.dataValue"
            :label="item.dataName"
            :value="item.dataValue"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <h2><strong>礼包信息</strong></h2>

      <el-form-item label="礼包名称" prop="giftName">
        <el-input
          v-model="row__.data.giftName"
          maxlength="10"
          show-word-limit
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="礼包描述" prop="giftDesc">
        <el-input
          v-model="row__.data.giftDesc"
          maxlength="30"
          show-word-limit
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
    </template>
  </KiFormDialog>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
          show: false,
          data: null,
          loading: false,
        };
      },
    },
    submitForm: {
      type: Function,
      required: true,
    },
  },
  computed: {
    ...mapGetters(["dict"]),
  },
  watch: {
    "form.show": {
      handler(nv, ov) {
        if (nv && !ov) {
          this.queryHotel();
        }
      },
      immediate: true,
      deep: true,
    },
    "row__.data.hotelId": {
      handler(nv, ov) {
        // 1、刚打开弹框时候(无旧值，有新值)，针对查看、编辑打开弹框
        // 2、刚打开弹框，选择酒店(无旧值，有新值)，针对新增打开弹框
        if (nv && !ov) {
          this.onHotelChange(nv);
        }
        // 清空酒店的值(新值空、有旧值)
        if(!nv && ov ){
          this.row__.data.roomTypeId=null
        }
        // 重新选择酒店(新值、旧值都有)
        if(nv && ov && nv!==ov){
          this.row__.data.roomTypeId=null
          this.onHotelChange(nv);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      row__: this.form,
      options: {
        hotelList: null,
        roomType: null,
      },
    };
  },
  methods: {
    /**
     * 获取关联已创建且审核通过的酒店
     * @param {String} code
     * @return Void
     */
    queryHotel(code) {
      this.$POST("sot-admin-api/hotel/self-employed/queryForList", {
        areaCode: code, // 区域编码
        merchantId: null,
        // status : 1, // 1正常,0为禁用 (需求没提酒店状态是否正常)
        reviewStatus: 3, // 审核通过
      })
        .then(({ data }) => {
          if (data && data.length > 0) {
            this.$set(this.options, "hotelList", data);
          } else {
            this.$set(this.options, "hotelList", []);
          }
        })
        .finally((e) => {});
    },
    /**
     * 根据酒店数据查询所属房型
     * @param {String} nv 房型id
     * @return Void
     */
    onHotelChange(nv) {
      this.$POST("sot-admin-api/hotel/self/roomTypeInfo/listForSelect", {
        hotelId: nv,
        // merchantId: null,
        // areaCode: null
      })
      .then(({ data }) => {
        let temp = [];
        if (data && data.length > 0) {
          data.forEach((its) => {
            temp.push({
              dataName: its.roomTypeName,
              dataValue: its.id,
            });
          });
          this.$set(this.options, "roomType", temp);
        } else {
          this.$set(this.options, "roomType", []);
        }
      })
      .finally((e) => {});
    }
  },
};
</script>

<style lang="scss" scoped>
h2 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 18px;
}
</style>